import React, {useEffect} from 'react';
import {Button, Form, Input, Card, Avatar, message} from 'antd';
import {UserOutlined} from '@ant-design/icons';
import './index.scss'
import {useDispatch} from "react-redux";
import { AsyncSetToken} from "@/store/modules/users";
import {useNavigate} from "react-router-dom";

const Login = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const onFinish = async (values) => {
        await dispatch(AsyncSetToken(values));
        // 跳转到首页
        navigate("/")
        // 提示登陆成功
        message.success("登录成功")
    };
    return (
        // 登录校验
        <div className={"container"}>
            <Card className={"card"}
                  title={<p style={{textAlign: "center"}}><Avatar size={50} icon={<UserOutlined/>}/></p>}
                  bordered={false}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 500,
                        marginRight: "100px"
                    }}
                    validateTrigger={"onBlur"}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="手机号"
                        name="mobile"
                        // 多条校验逻辑 先校验第一条逻辑再校验后面的逻辑
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!',
                            }, {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '手机号格式不规范!',
                            }
                        ]}
                    >
                        <Input size={"large"} style={{width: "300px"}} placeholder="请输入手机号"/>
                    </Form.Item>

                    <Form.Item
                        label="验证码"
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '请输入验证码! ',
                            },
                            {
                                pattern: /^\d{6}$/,
                                message: '请输入6位验证码!',
                            }
                        ]}
                    >
                        <Input.Password size={"large"} placeholder="请输入验证码" style={{width: "300px"}}/>
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button style={{width: "150px"}} type="primary" htmlType="submit">
                            欢迎登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Login